<template>
    <div class="box">
        <div class="left">
        <div class="one">
          <div class="ysz">
            <div>使用率</div>
            <div>{{info.USE}}%</div>
          </div>
          <div class="ky">
            <div>可用</div>
            <div>{{info.FREE_GB?info.FREE_GB.toFixed(2):''}} GB</div>
          </div>
          <div class="ky">
            <div>使用量</div>
            <div>{{info.USED_GB?info.USED_GB.toFixed(2):''}} GB</div>
          </div>
          <div class="ky">
            <div>总量</div>
            <div>{{info.TOTAL_GB?info.TOTAL_GB.toFixed(2):''}} GB</div>
          </div>
        </div>
        <div class="two" style="display:none">
          <div class="ytj">
            <div>已提交</div>
            <div>23.0/29.0 GB</div>
          </div>
          <div class="yhc">
            <div>已缓存</div>
            <div>6.2 GB</div>
          </div>
        </div>
        <div class="three" style="display:none">
          <div class="fyhcc">
            <div>分页缓存池</div>
            <div>1.0 GB</div>
          </div>
          <div class="ffyhcc">
            <div>非分页缓存池</div>
            <div>824 MB</div>
          </div>
        </div>
      </div>
      <div class="right" style="display:none">
        <table>
          <tr>
            <th>速度</th>
            <th>2133 MHZ</th>
          </tr>
          <tr>
            <th>已使用插槽</th>
            <th>2/2</th>
          </tr>
          <tr>
            <th>外形规格</th>
            <th> SODIMM</th>
          </tr>
          <tr>
            <th>为硬件保留的内存</th>
            <th>138 MB</th>
          </tr>
        </table>
      </div>
    </div>
</template>

<script>
import bus from "common/bus.js";
export default {
  // props:['data'],
  data(){
    return {
      info:''
    }
  },
  created(){
    
  },
  mounted(){
    bus.$on('ITEMMONITORMEMORYLINE',(msg) => {
      this.info = msg
    })
  },
  beforeDestroy(){
    this.info = ''
    bus.$off('ITEMMONITORMEMORYLINE')
  }
}
</script>

<style lang="scss" scope>
  .box {
    display: flex;
    flex-direction:row;
    .left {
      display: flex;
      flex-direction: column;
      font-weight: 600;
      .one,.two,.three {
        display: flex;
        flex-direction: row;
      }
      .one>div,.two>div,.three>div {
        margin: 5px;
      }
    }
  }
</style>